/**
 * 全局公用的钩子函数
 */

import { ref, onMounted } from 'vue'
// 导入监控元素是否进入可视区函数
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

/**
 *
 * @param {*} apiFn  请求方法
 * @returns
 */
export const useObserver = apiFn => {
  // 监控元素是否进入可视区
  /**
   * 结论
   * 1- 通过回调函数的 isInersecting 判断组件或元素是否进入可视区
   * 2- 监控是一直在执行 (第一次进入的时候, 发请求(只发一次))
   */

  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // isIntersecting 判断组件或元素是否进入可视区 --> true 进入 | false 离开
    // console.log(isIntersecting)
    if (isIntersecting) {
      apiFn()
      // 关闭监控
      stop()
    }
  }, {
    // 露头之后立马执行
    threshold: 0
  })
  return { target }
}

/**
 *
 * @param {*} time 倒计时时间
 */
export function useCountDown (time) {
  /**
   * pause 停止
   * resume 开始
   */
  const count = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    count.value--
    if (count.value <= 0) {
      pause()
    }
  }, 1000, {
    immediate: false
  })

  const start = () => {
    // 每次开始判断如果是0, 重新开始
    if (count.value === 0) {
      count.value = time
    }
    // 开始倒计时
    resume()
  }
  // 组件销毁时,清除定时器
  onMounted(() => {
    pause()
  })
  // 暴露 => 数据和方法
  return { count, start, pause }
}
